<template>
	<div>
		<el-dialog :visible.sync="hasRecord" width="1200px" top="20vh" append-to-body :show-close="false"
			custom-class="pc_bettingRecord_page">
			<!-- <van-nav-bar :title="$t('betting.navTitle')" placeholder left-arrow @click-left="onClickLeft" safe-area-inset-top
			:border="false" fixed placeholder /> -->
			<div class="logo_box">
				<i class="el-icon-close" @click="handleClose()"></i>
			</div>
			<div class="h1">
				{{$t('betting.navTitle')}}
			</div>
			<div class="page_cont">
				<div class="sw_but_box">
					<el-button :class="{active: type == 0}" @click="handleType(0)">{{$t('betting.ongoing')}}</el-button>
					<el-button :class="{active: type == 1}" @click="handleType(1)">{{$t('betting.closed')}}</el-button>
				</div>
				<van-empty class="custom-image" image-size="100" :image="require('@/assets/images/home/NoBet.png')"
					:description="$t('betting.noBet')" v-if="type == 1 ? list2 && list2.length <= 0 : list && list.length <= 0" />
				<div v-else>
					<el-collapse accordion v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
						<el-collapse-item v-for="(item,index) in type == 1 ? list2 : list" :key="index">
							<template slot="title">
								<div class="cell_title_box">
									<div class="flex_box">
										<div class="name">
											<div class="img_box">
												<img :src="item.order ? item.order.currency_match.base_currency.logo : item.currency_match.base_currency.logo" />
												<img :src="item.order ? item.order.currency.logo : item.currency.logo" />
											</div>
											{{item.symbol_name || 'BTC/USDT'}}
											<!-- BTC/USDT -->
										</div>
										<div class="u_box" :style="`color: ${ item.type ==  1 ? '#2ECC71' : '#FF5449'}`">
											<img
												:src="item.type == 1 ?require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')" />
											{{item.amount}} USDT
											<!-- 11 USDT -->
										</div>
										<div class="add_box">
											<div class="add" :style="type != 0 && item.profit > 0 ? 'color: #2ECC71' : ''">
												<i class="el-icon-circle-plus"></i>
												{{type == 0 ? '0' : item.profit || '0'}}
											</div>
										</div>
									</div>
									<div class="time_box">
										<div class="time" v-if="type == 0">
											<!-- item.remain_milli_seconds -->
											00:{{item.remain_milli_seconds >= 10 ? item.remain_milli_seconds : `0${item.remain_milli_seconds}`}}
											<div style="width: 60px; margin-left: auto;margin-top: 5px;">
												<el-progress :percentage="(item.remain_milli_seconds / 15) * 100" :show-text="false"
													:stroke-width="3" color="#137EFE" define-back-color="#202D5C"></el-progress>
											</div>
										</div>
									</div>
								</div>
							</template>
							<div class="info_box">
								<el-statistic group-separator="," :precision="2" :title="$t('home.amount')">
									<template slot="formatter">
										{{item.amount}}
										<!-- 10USDT -->
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="5" :title="$t('home.open')">
									<template slot="formatter">
										{{item.open_price}}
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="5" :title="$t('home.close')" v-if="type == 1">
									<template slot="formatter">
										{{item.end_price}}
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="2" :title="$t('home.yield')">
									<template slot="formatter">
										{{item.profit_ratio}}
										<!-- 10% -->
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="2" :title="$t('home.profit')">
									<template slot="formatter">
										{{type == 0 ? '0' : item.profit || 0}}
										<!-- 10USDT -->
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="2" :title="$t('home.orderId')">
									<template slot="formatter">
										{{type == 1 ? item.account : userInfo.uid}}
										<!-- id -->
									</template>
								</el-statistic>
								<el-statistic group-separator="," :precision="2" :title="type == 0 ? item.order?.created_at?.split(' ')[0] : item?.created_at?.split(' ')[0]">
									<template slot="formatter">
										<p v-if="type == 0">
											{{item.order?.created_at?.split(' ')[1]}}
										</p>
										<p v-else>
											{{item.created_at?.split(' ')[1]}} - {{item.complete_at?.split(' ')[1]}}
										</p>
									</template>
								</el-statistic>
							</div>
						</el-collapse-item>
					</el-collapse>
					
				</div>
			</div>
			<div class="fen_ye_box">
				<span>{{$t('home.total')}} {{pageInfo.total || 0}}</span>
				<i class="el-icon-arrow-left cur_p" @click="handlePre()"></i>
				{{page || 1}}/{{pageInfo.last_page || 1}}
				<i class="el-icon-arrow-right cur_p" @click="handleNext()"></i> 
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		microtradeLists
	} from '@/api/home'
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			}
		},
		components: {},
		data() {
			return {
				type: 0,
				page: 0,
				loading: false,
				finished: false,
				// hasInfo: false,
				details: {},
				pageInfo: {},
				list: [],
				list2: [],
			}
		},
		computed: {
			hasRecord: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			},
			userInfo() {
				return this.$store.state.userInfo
			},
			matches() {
				return this.$store.state.matches
			},
			newMyDownOrder() {
				return this.$store.state.newMyDownOrder
			},
			timeDown() {
				return this.$store.state.timeDown
			}
		},
		watch: {
			timeDown(val, oldVal) {
				// console.log('val', val);
				if (this.list && this.list.length > 0) {
					this.list.map((item, index) => {
						if (item.remain_milli_seconds <= 0) {
							this.$nextTick(() => {
								console.log('删除');
								this.list.splice(index, 1)
							})
							if (this.type == 1) {
								this.page = 1
								this.getList()
							}
							// this.$store.commit('closeMyOrderDom', item)
						}
					})
					// console.log('this.list::', this.list);
				}
			},
			newMyDownOrder(val) {
				// console.log('val', val);
				if (val && val.uid) {
					if (this.list.find(i => i.uid != val.uid)) {
						this.list.push(val)
						this.finished = true;
						this.loading = false;
					}
				}
			},
		},
		mounted() {
			if (this.newMyDownOrder && this.newMyDownOrder.remain_milli_seconds > 0) {
				this.list.push(this.newMyDownOrder)
				this.finished = true;
				this.loading = false;
			}
			console.log('userInfo', this.userInfo);
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			handlePre() {
				if (this.page <= 1) return
				this.page--
				this.getList()
			},
			handleNext() {
				if (this.page >= this.pageInfo.last_page) return
				this.page++
				this.getList()
			},
			handleType(type) {
				this.type = type
				this.page = 1;
				this.finished = false;
				this.getList()
			},
			onLoad() {
				if (!this.finished && this.type == 1) {
					this.page++
					this.getList()
				}
			},
			async getList() {
				console.log('请求');
				this.loading = true
				const res = await microtradeLists({
					match_id: this.matches.id,
					// status: this.type == 0 ? 1 : 3,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 6,
					page: this.page,
				}).catch(err => this.loading = false)

				console.log('res', res, {
					match_id: this.matches.id,
					// status: this.type == 0 ? 1 : 3,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 6,
					page: this.page,
				});
				if (res && res.code == 1) {
					this.list2 = res.data.data
					this.pageInfo = res.data
					// if (this.list2.length >= res.data.total) {
					// 	this.finished = true
					// }
				}
				this.loading = false
			},
			handleItem(item) {
				this.details = item
				this.hasInfo = true
			},
			handleClose() {
				this.$emit('input', false)
			}
		}
	}
</script>

<style lang="less">
	.pc_bettingRecord_page {
		position: relative;
		background: #1C232E !important;
		border-radius: 18px !important;
		min-height: 528px;

		.el-dialog__body {
			padding: 30px;
		}

		.el-dialog__header {
			display: none;
		}

		.logo_box {
			position: absolute;
			right: 30px;
			top: 34px;
			cursor: pointer;

			i {
				font-size: 24px;
				color: #fff;
			}
		}

		.h1 {
			font-family: PingFang SC;
			font-size: 24px;
			margin-bottom: 30px;
			text-align: left;
			color: #fff;
			font-weight: bold;
		}

		.page_cont {
			position: relative;
			margin-bottom: 40px;
			// padding: 25px 15px 5px;
		}

		.sw_but_box {
			width: 270px;
			height: 54px;
			display: flex;
			align-items: center;
			margin-bottom: 24px;
			border: 1px solid #353F4C;
			border-radius: 18px;
			padding: 6px;
			background: #161D26;

			.el-button {
				width: 48%;
				background-color: transparent;
				border-radius: 12px;
				border: 0;
				color: #A1A6A9;

				&.active {
					background-color: #137EFE;
					color: #fff;
				}
			}

			.el-button+.el-button {
				margin-left: 2%;
			}
		}

		.fen_ye_box {
			position: absolute;
			bottom: 30px;
			left: 0;
			width: 100%;
			text-align: right;
			color: #fff;
			// margin-top: 24px;
			font-size: 14px;

			i {
				margin: 0 20px;
				font-size: 18px;
			}
		}

		.list_item {
			padding: 14px;
			margin-bottom: 14px;
			border-radius: 10px;
			background-color: #1D2630;

			.name_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30px;

				.name {
					display: flex;
					align-items: center;
					font-size: 12px;
				}

				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

			}

			.usdt_box {
				display: flex;
				justify-content: space-between;

				.u_box {
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #2ECC71;

					img {
						width: 10px;
						margin-right: 7px;
					}
				}

				.add_box {
					color: #A4A8AB;
					font-size: 12px;
				}
			}

			.time_box {
				.time_text {
					text-align: right;
					font-size: 12px;
					color: #A4A8AB;
				}

				.time {
					text-align: right;
					font-size: 12px;
				}
			}
		}

		// ::v-deep .van-popup {
		// 	background-color: #212A36;
		// 	border-radius: 10px;
		// 	padding: 15px;
		// 	width: 300px;

		// 	.title_box {
		// 		border-bottom: 1px solid #353F4C;
		// 		margin-bottom: 20px;
		// 		padding: 0 0 15px;
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;

		// 		.coin_box {
		// 			display: flex;
		// 			align-items: center;
		// 			font-size: 12px;

		// 			.img_box {
		// 				display: flex;

		// 				img {
		// 					position: relative;
		// 					z-index: 2;
		// 					width: 20px;
		// 					border-radius: 50%;
		// 				}

		// 				img+img {
		// 					margin-left: -10px;
		// 					z-index: 1;
		// 					margin-right: 5px;
		// 				}
		// 			}
		// 		}

		// 		.close {
		// 			width: 20px;
		// 		}
		// 	}

		// 	.info_item {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: space-between;
		// 		color: #A4A8AB;
		// 		margin-bottom: 15px;

		// 		.info {
		// 			color: #fff;

		// 			img {
		// 				width: 10px;
		// 				margin-right: 5px;
		// 			}
		// 		}
		// 	}

		// 	.info_item:last-of-type {
		// 		margin-bottom: 0;
		// 	}
		// }

		.el-collapse {
			border: 0;
		}

		.el-collapse-item {
			border-radius: 10px;
			overflow: hidden;
			margin-bottom: 6px;
		}

		.el-collapse-item__header {
			height: 42px;
			line-height: 42px;
			background-color: #222935;
			color: #fff;
			border: 0;
		}

		.el-collapse-item__wrap {
			position: relative;
			background-color: #222935;
			color: #fff;
			border-bottom: 0;

			// border-top: 1px solid #1C232E;
			&::after {
				content: ' ';
				position: absolute;
				left: 12px;
				top: 0;
				width: calc(100% - 24px);
				height: 1px;
				background-color: #1C232E;
			}
		}

		.el-collapse-item__arrow.el-icon-arrow-right:before {
			content: "\e6df";
		}

		.el-collapse-item__arrow.is-active {
			transform: rotate(-180deg)
		}

		.el-collapse-item__content {
			color: #fff;
			padding: 18px 12px;

			.info_box {
				display: flex;
				width: 90%;

				.el-statistic {
					width: auto;
					// width: auto;
					text-align: left;
					width: 150px;

					.title {
						font-size: 14px;
						color: #A4A8AB;
					}

					.con {
						color: #fff;
						font-size: 14px;
						justify-content: start;

						span {
							padding: 0;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}

				.el-statistic:last-of-type {
					margin-left: 50px;
				}
			}
		}

		.cell_title_box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 12px;

			.flex_box {
				width: 100%;
				display: flex;
				align-items: center;

				.name {
					display: flex;
					align-items: center;
					font-size: 14px;
				}

				.u_box {
					display: flex;
					align-items: center;
					font-size: 14px;
					color: #2ECC71;
					margin-left: 60px;

					img {
						width: 10px;
						margin-right: 7px;
					}
				}

				.add_box {
					color: #A4A8AB;
					font-size: 14px;
					margin-left: 60px;
				}


				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

			}

			.time_box {
				line-height: normal;
				display: flex;
				align-items: center;

				.time {
					text-align: right;
					font-size: 12px;
				}
			}


		}
	}
</style>